import React from "react";


function ProductRow(props) {
    const name = props.product.stocked ? props.product.name : <span style={{ color: 'red' }}>{props.product.name}</span>
    return (
        <tr>
            <td>{name}</td>
            <td>{props.product.price}</td>
        </tr>
    )

}

function ProductCategoryRow(props) {
    return (
        <tr>
            <th colSpan={2}>{props.category}</th>
        </tr>

    )
}

class ProductTable extends React.Component {
    // 3、数据传过来，开始进行展示



    render() {
        const row = [];
        let lastText = null;
        const { isSubmit,textone } = this.props
        this.props.products.forEach((product) => {

          
            if(isSubmit && !product.stocked){
                return
            }

            if(product.name.indexOf(textone) === -1)
            {
                return
            }
            if (product.category !== lastText) {
                row.push(
                    <ProductCategoryRow category={product.category} />
                )

            }
            row.push(

                <ProductRow product={product} />
            )
            lastText = product.category
        })


        return (

            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>

                </thead>

                <tbody>
                    {row}
                </tbody>
            </table>
        )

    }

}




class SearchBar extends React.Component {
    constructor(props){
        super(props)
        this.handSubmit=this.handSubmit.bind(this)
    }

    handSubmit = (e) => {
        const checked = e.target.checked
        console.log(checked)
        this.props.handsunmit(checked)
    }
    handTextone = (e) =>{
        const value = e.target.value
        this.props.handtextone(value)
    }

    render() {
        const { isSubmit,textone } = this.props
        return (
            <form>
                <input type="text" value={textone} onChange={this.handTextone}/>
                <input type="checkbox" onChange={this.handSubmit} checked={isSubmit} />
                <span>没有货物</span>
            </form>

        )
    }
}

class FilterableProductTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isSubmit: false,
            textone:''
        }
        this.handsunmit=this.handsunmit.bind(this)
    }
    handsunmit = (isSubmit) => {
        this.setState({
            isSubmit
            
        })
        console.log(isSubmit)
    }
    handtextone = (textone) =>{
        this.setState({
            textone
        })
    }

    render() {
        const { poducts } = this.props
        const { isSubmit,textone } = this.state
        return (
            <div>
                <SearchBar handsunmit={this.handsunmit} handtextone={this.handtextone} textone={textone} isSubmit={isSubmit} />

                <ProductTable isSubmit={isSubmit} textone={textone} products={poducts} />

            </div>
        )
    }




}


export default FilterableProductTable
